<template>
  <div class="comp-echarts-map">
    <div id="map" style="height: 1080px"></div>
    <!--  <BMap-->
    <!--      v-bind="$attrs"-->
    <!--      :zoom="zoom"-->
    <!--      :height="1080"-->
    <!--      :center="position"-->
    <!--      :plugins="['Mapvgl', 'Mapv']"-->
    <!--      :displayOptions="{-->
    <!--      indoor: false,-->
    <!--      poi: true,-->
    <!--      skyColors: ['rgba(5, 5, 30, 0.01)', 'rgba(5, 5, 30, 1.0)']-->
    <!--    }"-->
    <!--      mapStyleId="e3a997bdd06b828e6a6f5b620c7cf712"-->
    <!--      enableScrollWheelZoom-->
    <!--      @pluginReady="handlePluginReady"-->
    <!--  >-->
    <!--    <BControl style="display: flex; background-color: #fff; padding: 10px" :offset="{ x: 0, y: 0 }">-->

    <!--    </BControl>-->
    <!--  </BMap>-->
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import mapStyleJson from "./mapStyleJson/mapStyleJson";

const props = defineProps({
  devs: Array,
})
const emit = defineEmits(['mapClick'])
const myMap = ref()
onMounted(() => {
  initChartMap()
  myMap.value.on('click', function (params) {
    if (params.seriesType === 'effectScatter'){
      props.devs.forEach((item)=>{
        if (item.number === params.data.number){
          emit('mapClick',item)
        }
      })
    }

  })
})
watch(()=>props.devs,()=>{
  // initChartMap()
  myMap.value.setOption({
    series: {
      data: getData(),
    }
  })
})
var typeColorMap = {
  '0': '#C2C2C2', //离线
  '1': '#67C23A',//在线
  '2': '#f4e925',//待机
  '3': '#F56C6C',//报警
};
function getData() {
  return props.devs.map((item) => {
    return {
      name: item.name,
      value: [item.coordinateLon, item.coordinateLat],
      status: getStatus(item),
      number: item.number
    }
  }).sort((a,b)=>{
    return a.status-b.status
  })
}
function getStatus(item) {
  if(item.data?.substring(2,3)  == '1') return '3'
  if(item.data?.substring(3) == '1') return '1'
  if(item.data?.substring(1,2) == '1' || item.data == '0000') return '2'
  if(item.data?.substring(0,1) == '0') return '0'
  return '0'
}
function initChartMap() {
  myMap.value = echarts.init(document.getElementById('map'));
  const option = {
    backgroundColor: 'transparent',
    animation: false,
    bmap: {
      center: [115.78, 30.47],
      zoom: 6,
      roam: true,
      // mapStyle: {
      //   styleJson: mapStyleJson,
      // }
      mapStyleV2:{
       styleId:"e3a997bdd06b828e6a6f5b620c7cf712"
      }
    },
    // tooltip: {
    //   show: true,
    //   trigger: 'item',
    //   triggerOn: 'click',
    //   // enterable:  true,
    //   position: "top",
    //   // hideDelay: 500,
    //   alwaysShowContent: false,
    //   // alwaysShowContent: true,
    //   //extraCssText: "display: block;width: 358px;height: 230px;padding: 8px 14px 14px;user-select:text"
    // },
    series: {
      type: 'effectScatter',
      coordinateSystem: 'bmap',
      data: getData(),
      label: {
        normal: {
          formatter: (param) => {
            return param.data.name
          },
          position: 'right',
          show: false
        },
        emphasis: {
          show: true
        }
      },
      encode: {
        value: 2
      },
      symbolSize: 20,
      showEffectOn: 'emphasis',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      itemStyle: {
          color: (params)=>{
            var status = params.data.status
            return typeColorMap[status]
          },
          shadowBlur: 10,
          shadowColor: '#333'

      },
      events: {
        'click': function (params) {
          console.log('Clicked on point:', params);
        }
      },
      zlevel: 1
    }
  }
  myMap.value.setOption(option)

}

</script>
<style>
.comp-echarts-map {
  width: 100%;
  height: 100%;
}
</style>
